<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div>消息</div>
      </div>
    </div>
    <div class="qie">
      <div class="cai">
        <el-table :data="list"
                  style="width: 100%">
          <el-table-column label="序号"
                           type="index"
                           width="55">
          </el-table-column>
          <el-table-column label="消息标题"
                           prop="title"
                           align='center'>
          </el-table-column>
          <el-table-column label="时间"
                           prop="caAt"
                           align='center'>
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <div v-html="props.row.content"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background
                     layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :current-page.sync="page"
                     :total="total"
                     :page-size="pageSize"
                     prev-text="上一页"
                     next-text="下一页"
                     class="aut">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [], // 消息列表
      total: 0, // 总条数
      page: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.getList();
  },
  methods: {
    // 切换页码
    handleCurrentChange (currentPage) {
      this.page = currentPage;
      this.getList();
    },
    // 获取消息列表
    getList () {
      const that = this;
      this.$postRequest("/api/cms/noticeSys/list", {
        pageNumber: this.page,
        pageSize: this.pageSize,
        status: "1"
      }).then(res => {
        that.total = res.data.total;
        that.list = res.data.list;
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.in {
  width: 100%;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        width: 60px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
    }
    .ul2 {
      padding-right: 20px;
      cursor: pointer;
      color: #1a69e0;
      display: flex;
      align-items: center;
      .img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .cai {
    margin: 30px 20px;
    border: 1px solid #eeeeee;
    border-bottom: none;
  }
  .aut {
    text-align: center;
    margin-top: 14px;
    margin-bottom: 14px;
  }
  /deep/ .el-pagination button,
  .el-pagination span:not([class*='suffix']) {
    width: 60px;
  }
}
</style>